{% extends 'base.html' %}
{% block content %}
<div id="alerts-wrapper" class="">
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    {% for category, message in messages %}
      <div id="alert-message" class="alert alert-{{ category }}">
          {{ message }}
      </div>
      {% endfor %}
    {% endif %}
  {% endwith %}
</div>

<!-- Edit Server Modal -->
<div class="modal fade" id="edit-server-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <form id="edit_projects_form" class="d-block mb-3" method="post" action="" autocomplete=false >
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">    
                {{ form.hidden_tag() }}
            <div class="form-row">
              {{ form.server_name.label( class="form-control-label" ) }}
              {{ form.server_name( class="form-control", value="" ) }}
            </div>
            <div class="form-row">
              {{ form.endpoint_url.label( class="form-control-label" ) }}
              <div class="input-goup">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="inputGroupPrepend">ocp.tcp://</span>
                  {{ form.endpoint_url(class="form-control", value="") }}
                </div>
              </div>
            </div>
            <div class="form-row">
              {{ form.namespace.label( class="form-control-label" ) }}
              {{ form.namespace( class="form-control",value="" ) }}
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Start Server Modal -->
<div class="modal fade config-server-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <form method="POST" id="config-server-form" class="mx-3 mt-2 mb-3">
          <div class="modal-header">
              <h5 class="modal-title" id="exampleModalCenterTitle">Config Server</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
          </div><!--Modal Title-->
          <div class="modal-body">
            <div id="msgs"></div>
                <!-- <input type="hidden" id="start_server_csrf" name="csrf_token" value="{{ csrf_token() }}"/> -->
                <input type="hidden" name="serverID" />
                <div class="form-group">
                    <label for="input-ip">PLC Address</label>
                    <input type="text" id="input-ip" class="form-control" name="plc_ip" placeholder="default: 192.168.0.1">              
                </div>
              </div>
              <div class="modal-footer">
                  <a data-server-id="" class="btn btn-sm btn-primary start-server" href="#"><i data-feather="play-circle"></i></a>
                  <a data-server-id="" class="btn btn-sm btn-danger stop-server" href="#"> <i data-feather="stop-circle"></i> </a>
                    
                <!-- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button> -->
          </form>
        </div>
      </div>
    </div>
  </div>

  <form id="projects_form" class="d-block mb-3" method="post" action="{{url_for('create_server')}}" autocomplete=false >
      {{ form.hidden_tag() }}
      <div class="form-row">
        <div class="col-4 mb-3">
          {{ form.server_name.label( class="form-control-label" ) }}
          {{ form.server_name( class="form-control", value="" ) }}
        </div>

        <div class="col-4 mb-3">
          {{ form.endpoint_url.label( class="form-control-label" ) }}
          <div class="input-goup">
            <div class="input-group-prepend">
              <span class="input-group-text" id="inputGroupPrepend">ocp.tcp://</span>
              {{ form.endpoint_url(class="form-control", value="") }}
            </div>
          </div>
        </div>

        <div class="col-4 mb-3">
          {{ form.namespace.label( class="form-control-label" ) }}
          {{ form.namespace( class="form-control",value="" ) }}
        </div>
      </div>

      <div class="form-row">
        {{ form.submit( class="form-control btn btn-outline-info col-6 offset-3" ) }}
      </div>
  </form>
  <table class="table">
      <thead>
        <tr class="row">
          <th scope="col" class="col-sm-1">#</th>
          <th scope="col" class="col-sm-2">Server Name</th>
          <th scope="col" class="col-sm-2 ">Endpont Url</th>
          <th scope="col" class="col-sm-3 ">Namespace</th>
          <th scope="col" class="col-sm-3">Action</th>
        </tr>
      </thead>
      <!-- <tbody>
        {% if servers %}
        {% for server in servers %}
        <tr class="row">
          <th scope="row" class="col-sm-1">{{ server.id }}</th>
          <td class="col-sm-2">{{ server.server_name }}</td>
          <td class="col-sm-2">{{ server.server_endpoint_url }}</td>
          <td class="col-sm-3">{{ server.server_namespace }}</td>
          <td class="col-sm-3">
              <p>
                <a  data-serverid="{{ server.id }}" data-name="{{ server.server_name }}" 
                    data-epurl="{{ server.server_endpoint_url }}" data-namespace="{{ server.server_namespace }}"
                   href="#" class="btn btn-success btn-sm edit-server-btn"> <i data-feather="edit-2"></i> </a>
                <a class="btn btn-sm btn-secondary" href="{{ url_for('server_populate',serverid=server.id) }}"><i data-feather="edit"></i> </a>
                <a data-server-id="{{ server.id }}" data-toggle="modal" data-target=".config-server-modal" class="btn btn-sm btn-info config-server" href="#"> <i data-feather="settings"></i> </a>
                <a data-server="{{ server.id }}" role="button" class="btn btn-sm btn-warning delete-server" href="#"><i data-feather="trash"></i></a>
              </p>
            </td>
          </tr>
          <form method="post" id="del-server-form-{{ server.id }}" class="d-none" action="{{ url_for('delete_server',serverid=server.id) }}">
              <input type="hidden" name="csrf_token" value="f1d9d48ec0e26e2a250839fa36ea2c602cc4f85ccfeb5c65"/>
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
              <input type="hidden" name="server_id" value="{{ server.id }}">
          </form>
          {% endfor %}
          {% else %}
            <tr><td class="text-center h3 text-muted"> <strong> No Servers Defined </strong></td></tr>
          {% endif %}
        </tbody> -->
    </table>
{% endblock %}
{% block javascripts %}
    {{ super() }}
    <!-- <script>
        $('.delete-server').on('click',function(e){
            e.preventDefault()
            let serverid = $(this).attr('data-server');
            $('#del-server-form-'+serverid).trigger('submit') 
        });
        let csrf_token = "{{ csrf_token() }}"
        $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrf_token);
                }
            }
        });
       
    </script> -->
{% endblock %}


